<style>
    h3 {
        color: white;
        position: absolute;
        margin: 5px;
    }
</style>
<div id="monitor">
    <h3>
        <span id="time"></span>
        fps:<span id="fps"></span>
        name:<span id="name"></span>
    </h3>
    <img>
</div>
<input id="fps-input"><button onclick="setup_fps()">设置FPS</button>
<button onclick="stop()">停止</button>
<button onclick="start()">继续</button>

<script>
    var ID = '<?= $id ?>';

    var $img = $('#monitor img');
    var $time = $('#time');
    var $fps = $('#fps');
    var $name = $('#name');
    var $fps_input = $('#fps-input');

    var last_img_id;
    var is_stop = 0;

    load();

    function load() {
        $.get('index.php', {
            action: 'monitor',
            ajax: 1,
            id: ID
        }, function (resp) {
            var client = resp.client;
            var img = resp.img;
            if (last_img_id != img.id) {

                $time.text(img.t);
                $fps.text(client.fps);
                $name.text(client.name);
                $img.attr('src', img.path);

                last_img_id = img.id;
            }

            if (!is_stop) {
                setTimeout(load, 20);
            }
        }, 'json');
    }


    /*
    setInterval(function () {
        if (IMG_IDX >= IMGS.length) {
            IMG_IDX = IMGS.length - 1;
        }
        var img = IMGS[IMG_IDX];
        $img.attr('src', img.path);
        $time.text(img.t);
        $fps.text(CLIENT.fps);
        $name.text(CLIENT.name);
        setTimeout(function () {
            IMG_IDX++;
        }, 1000/CLIENT.fps);
    }, 20);
    */

    function setup_fps() {
        $.post('index.php?action=set_fps', {
            id:ID,
            fps:$fps_input.val()
        });
    }
    function stop() {
        $.post('index.php?action=stop', {
            id:ID
        });
        is_stop = 1;
    }
    function start() {
        $.post('index.php?action=start', {
            id:ID
        }, function () {
            is_stop = 0;
            load();
        });
    }
</script>